คณะว ศวกรรมศาสตร มหาว ทยาล ยเกษตรศาสตร เร อง พ ฒนาเว บไซต โครงการเป ดสอนปร ญญาตร นานาชาต โดย นายอ ครพงษ กาญจนอาพล พ.ศ.

Transcription

1 โครงงานว ศวกรรมคอมพ วเตอร ภาคว ชาว ศวกรรมคอมพ วเตอร คณะว ศวกรรมศาสตร มหาว ทยาล ยเกษตรศาสตร เร อง พ ฒนาเว บไซต โครงการเป ดสอนปร ญญาตร นานาชาต คณะว ศวกรรมศาสตร มหาว ทยาล ยเกษตรศาสตร International Undergraduate Program Website Development Faculty of Engineering, Kasetsart University โดย นายอ ครพงษ กาญจนอาพล พ.ศ i

2 ใบร บรองโครงงานว ศวกรรม ภาคว ชาว ศวกรรมคอมพ วเตอร เร อง พ ฒนาเว บไซต โครงการเป ดสอนปร ญญาตร นานาชาต โดย นาย อ ครพงษ กาญจนอาพล เลขประจาต ว พ จารณาเห นชอบโดย อาจารย ท ปร กษาโครงงาน... (ผศ.อ นท ราภรณ ม ลศาสตร ) ว นท...เด อน...พ.ศ... ห วหน าภาคว ชาว ศวกรรมคอมพ วเตอร... (ผศ.ดร. ภ ชงค อ ทโยภาศ) ว นท...เด อน...พ.ศ... ii

3 นายอ ครพงษ กาญจนอ าพล เว บแอปพล เคช นสาหร บโครงการปร ญญาตร นานาชาต ปร ญญาว ศวกรรมศาสตรบ ณฑ ต (สาขาว ศวกรรมคอมพ วเตอร ) ภาคว ชาว ศวกรรมคอมพ วเตอร คณะว ศวกรรมศาสตร มหาว ทยาล ยเกษตรศาสตร บทค ดย อ โครงงานพ ฒนาเว บไซต โครงการเป ดสอนปร ญญาตร นานาชาต เป นการสร างเว บไซต ของโครงการ IUP มหาว ทยาล ยเกษตรศาสตร เพ อนาเสนอข าวสารของภาคว ชา ข อม ลเก ยวก บสาขาว ชา เช น ข อม ลบ คลากร ข อม ล หล กส ตรการศ กษา ข อม ลใบค าร องต างๆ และเอกสารท เก ยวข องต างๆ เป นต น เว บไซต แบ งออกเป น 2 ส วนการ ทางาน ค อ เว บไซต ของโครงการเพ อประชาส มพ นธ ข าวสารต างๆ ท วไป และระบบสม ครเร ยนออนไลน เพ อใช ใน การร บสม ครน ส ตใหม ซ งเป นระบบท โครงการย งไม ม เพ ออ านวยความสะดวกในการสม ครเร ยน คาสาค ญ Wordpress, PHP iii

4 Akarapong Kanchana-ampol Web Application for International Undergraduate Program Bachelor Degree in Engineering Department Computer Engineering Faculty of Engineering, Kasetsart University Abstract International Undergraduate Program development project is implemented for IUP, Kasetsart University to present IUP s news, information and information such as managerial board, course scheme, petition form, relevant document, etc. This website is divided into two parts, the first part is website sharing information and Online admission system which IUP do not have for facilitating in applying for studying Keyword: Wordpress, PHP iv

5 ก ตต กรรมประกาศ การดาเน นโครงงาน พ ฒนาเว บไซต โครงการเป ดสอนปร ญญาตร นานาชาต เร มจากการท เว บไซต เก า ของ IUP น นย งไม ม ระบบการสม ครเร ยนออนไลน อ กท งย งม แนวค ดในการเปล ยนหน าตาเว บไซต กระผมจ งได จ ดทาโครงงานน ข นมา ขอกราบขอบค ณ ผศ. อ นท ราภรณ ม ลศาสตร อาจารย ท ปร กษาโครงงานท คอยให ค าปร กษา คอยช แนะ ให โครงงานสาเร จล ล วงไปด วยด ขอขอบค ณเพ อน CPE 23 ท กคนท คอยช วยเหล อในการทาโครงงานน ท กคาถาม ท คอยอธ บายและคอยช วยแก ป ญหา อ ครพงษ กาญจนอาพล ผ จ ดทา v

6 สารบ ญ สารบ ญ... vi สารบ ญภาพ... viii สารบ ญตาราง... xi 1. บทนา ว ตถ ประสงค ของโครงงาน ขอบเขตของโครงงาน ประโยชน ท ได ร บ ทฤษฎ ท เก ยวข อง HTML PHP CSS SQL Wordpress ระบบการจ ดการฐานข อม ล (DBMS: Database Management System) เคร องม อท ใช ในการทาโครงงาน Software ว ธ การดาเน นโครงงาน องค ประกอบโดยรวมของระบบ กระบวรการทางานของระบบ Web Site ระบบสม ครออนไลน ข นตอนการพ ฒนา การออกแบบฐานข อม ล พจนาน กรมฐานข อม ล vi

7 4.3.3 E-R Diagram การเช อมความส มพ นธ (Relationship) ผลการดาเน นโครงงานและว จารณ ส วนแสดงข าวสารของเว บไซต ส วนของการ Search Menu ส วนของระบบสม ครเร ยน การ login ด ข อม ลในส วนของ admin การสม ครส วนของ user สร ปผลการดาเน นงานและข อเสนอแนะ ข อสร ป ป ญหาและอ ปสรรค แนวการการพ ฒนาต อ บรรณาน กรม ภาคผนวก การต ดต งและใช งาน Appserv เบ องต น การต ดต ง Wordpress ประว ต น ส ต vii

8 สารบ ญภาพ ร ปท 2-1 การทางานของ PHP... 3 ร ปท 2-2 Wordpress... 5 ร ปท 4-1 ร ปแบบการเช อมต อของระบบ... 9 ร ปท 4-2 หน าเว บไซต ร ปท 4-3 Flowchart การร บสม ครเร ยน ร ปท 4-4 Flowchart การสม ครออนไลน ในส วน User ร ปท 4-5 Flowchart ส วนของ Admin ร ปท 4-6 แผนภาพ E-R Diagram ร ปท 4-7 แผนภาพแสดงความส มพ นธ ระหว าง student ก บ member ร ปท 4-8 แผนภาพแสดงความส มพ นธ ระหว าง student ก บ passport ร ปท 4-9 แผนภาพแสดงความส มพ นธ ระหว าง student ก บ acadequal ร ปท 4-10 แผนภาพแสดงความส มพ นธ ระหว าง student ก บ acadeaward ร ปท 4-11 แผนภาพแสดงความส มพ นธ ระหว าง student ก บ stat ร ปท 4-12 แผนภาพแสดงความส มพ นธ ระหว าง student ก บ program ร ปท 4-13 แผนภาพแสดงความส มพ นธ ระหว าง student ก บ upload ร ปท 4-14 แผนภาพแสดงความส มพ นธ ระหว าง upload ก บ doctype ร ปท 5-1 ส วนแสดงข าวสาร ร ปท 5-2 ส วนการ search ข อม ล ร ปท 5-3 Menu ร ปท 5-4 child-page ร ปท 5-5 หน า login ร ปท 5-6 หน า admin ร ปท ร ปท viii

9 ร ปท ร ปท ร ปท ร ปท ร ปท ร ปท ร ปท ร ปท ร ปท ร ปท ร ปท ร ปท ร ปท ร ปท ร ปท ร ปท ร ปท ร ปท ร ปท ร ปท ร ปท ร ปท ร ปท ร ปท ร ปท ร ปท ix

10 ร ปท ร ปท x

11 สารบ ญตาราง ตารางท 4-1 member ตารางท 4-2 student ตารางท 4-3 program ตารางท 4-4 choose ตารางท 4-5 acadequal ตารางท 4-6 acadeaward ตารางท 4-7 upload ตารางท 4-8 doctype ตารางท 4-9 passport ตารางท 4-10 stat xi

12 1. บทนา โครงการเป ดสอนปร ญญาตร นานาชาต (IUP) คณะว ศวกรรมศาสตร มหาว ทยาล ยเกษตรศาสตร น น ป จจ บ นม เว บไซต แต ไม ได ใช ประโยชน ส งส ดเน องด วยการจ ดร ปแบบหน าเว บไซต ย งไม สวยงาม การจ ดข อม ลของ เว บไซต ย งไม เป นระบบและไม ม ความเป นระเบ ยบทาให ยากต อการค นหาข อม ลเก ยวก บสาขาว ชา การค นหา เอกสารท เก ยวข องก บการสม ครในเว บไซต เช น เอกสารการร บสม ครหร อเอกสารอ นๆ ท าได ยาก การจ ดการเมน ต างๆ ในเว บไซต ย งไม เป นสากล ย งไม ม ข อม ลเก ยวก บว ธ การย นคาร องต างๆ นอกจากน โครงการเป ดสอนปร ญญาตร นานาชาต (IUP) ต องการร บสม ครน ส ตท สนใจด วยระบบออนไลน เพ อความสะดวกในการสม ครและการดาเน นงานด งน นจ งต องการระบบล อกอ นและระบบฐานข อม ลท ด เพ อให การ ใช งานได อย างม ประส ทธ ภาพ จากป ญหาท กล าวมาข างต นน นสามารถแก ไขโดยการสร างเว บไซต สาหร บโครงการเป ดสอนปร ญญาตร นานาชาต (IUP) ข นมาใหม โดยม การจ ดหน าเว บไซต เป นสากลและม ความสวยงาม ม ระบบท ใช ในการร บสม ครน ส ต แบบออนไลน จ งต องใช ระบบฐานข อม ลท ม ประส ทธ ภาพและม ก าหนดส ทธ ให ก บผ ท สามารถเข าถ งข อม ลได โดยส ทธ ของผ ท สามารถเข าถ งฐานข อม ลน นม ความแตกต างก นเพ อให ทราบถ งความร บผ ดชอบว าใครบ างท ม ส ทธ ในการ เปล ยนแปลงข อม ลภายในฐานข อม ลน น และใครบ างท สามารถจะมองเห นข อม ลและนาข อม ลไปใช เท าน น 1.1 ว ตถ ประสงค ของโครงงาน เพ อพ ฒนาโปรแกรมประย กต ท ใช งานบนอ นเตอร เน ต 1) เพ อให น กเร ยนท สนใจสม ครเข าเร ยนโครงการ IUP และน ส ตแต ละคนสามารถเข ามาอ านข าวสาร ของทางโครงการ IUP ผ านเว บไซต ภาคว ชาอย างถ กต อง 2) เพ ออานวยความสะดวกให ผ ท ม ความเก ยวข องก บการร บสม ครน ส ตของสาขาว ชาท งการร บสม คร ออนไลน และออฟไลน 3) เพ ออานวยความสะดวกให ก บบ คลากรท เก ยวข องในการร บสม คร 1.2 ขอบเขตของโครงงาน ออกแบบและพ ฒนาระบบในส วนของ 1) เว บไซท โครงการ IUP คณะว ศวกรรมศาสตร มหาว ทยาล ยเกษตรศาสตร 2) การกรอกแบบฟอร มการสม ครโครงการ IUP แบบออนไลน 3) ระบบสมาช กท ม การแบ งระด บการเข าถ งข อม ลโดยม การล อกอ น 1

13 1.3 ประโยชน ท ได ร บ 1) ให ความสะดวกน กเร ยนท ต องการสม ครเข าโครงการ IUP ซ งอาจอย ต างจ งหว ดหร อต างประเทศ ไม ต องเด นทางมาท มหาว ทยาล ยเกษตรศาสตร 2) น ส ตป จจ บ นของโครงการ IUP สามารถด ข าวสารและข อม ลได สะดวก 3) ทาให เจ าหน าท และน ส ตม ความสะดวกในการเข าถ งข อม ลท สนใจ 4) ทาให ม แหล งเผยแพร ข าวสารของโครงการ IUP ได ถ กต อง 2

14 2. ทฤษฎ ท เก ยวข อง 2.1 HTML HTML (Hypertext Markup Language) HTML ค อ ภาษาท ใช ในการเข ยนเว บเพจ ย อมาจากค าว า Hypertext Markup Language โดย Hypertext หมายถ ง ข อความท เช อมต อก นผ านล ง (Hyperlink) Markup หมายถ ง ว ธ ในการเข ยนข อความ language หมายถ งภาษา ด งน น HTML ก ค อ ภาษาท ใช ในการเข ยนข อความ ลง บนเอกสารท ต างก เช อมถ งก นใน cyberspace ผ าน Hyperlink ทาให สามารถนาข อความหร อร ปภาพต างๆ มา แสดงลงบนเว บไซต ได [1] 2.2 PHP PHP (Professional Home Page) ค อ ภาษาจาพวก Script Language คาส งต างๆ จะเก บอย ในไฟล ท เร ยกว า สคร ปต (Script) และเวลาใช งานต องอาศ ยต วแปรช ดคาส ง ซ งทางานโดยการส งงานจากเว บเพจ แต ไป ประมวลผลท Web Server สาหร บแสดงเว บเพจอย างหน ง ท จ ดอย ในกล ม Server Side Script และจะทางานใน ฝ ง Server แล วส งการแสดงผลมาย ง Browser ของต ว Client นอกจากน ม นย งเป น Script ท Embed บน HTML อ กด วย ส วนเลขท ต อท ายก หมายถ งร น (version) น นเอง และกาล งเป นท น ยมก นมากในหม น กสร างเว บท วโลก ต วอย างของภาษาสคร ปต ก เช น Java Script, Perl, ASP (Active Server Page) เป นต น PHP เป นภาษาสคร ปต ท ม ความสามารถส ง สาหร บการพ ฒนา Web Site และความสามารถท โดดเด นอ ก ประการหน งของ PHP ค อ database enabled web page ทาให เอกสารของ HTML สามารถท จะเช อมต อก บ ระบบฐานข อม ล (database) ได อย างม ประส ทธ ภาพและรวดเร ว จ งทาให การจ ดเก บ ข อม ลต างๆ ท สาค ญผ านทาง Internet เป นไปได อย างง ายดาย [2] ร ปท 2-1 การทางานของ PHP 3

15 2.3 CSS CSS (Cascading Style Sheets) ม กเร ยกโดยย อว า "สไตล ช ต" ค อภาษาท ใช เป นส วนของการจ ดร ปแบบ การแสดงผลเอกสาร HTML โดยท CSS กาหนดกฎเกณฑ ในการระบ ร ปแบบ (หร อ "Style") ของเน อหาในเอกสาร เช น ส ของข อความ ส พ นหล ง ประเภทต วอ กษร และการจ ดวางข อความ ซ งการกาหนดร ปแบบ หร อ Style น ใช หล กการของการแยกเน อหาเอกสาร HTML ออกจากคาส งท ใช ในการจ ดร ปแบบการแสดงผล กาหนดให ร ปแบบ ของการแสดงผลเอกสาร ไม ข นอย ก บเน อหาของเอกสาร เพ อให ง ายต อการจ ดร ปแบบการแสดงผลล พธ ของเอกสาร HTML โดยเฉพาะในกรณ ท ม การเปล ยนแปลงเน อหาเอกสารบ อยคร ง หร อต องการควบค มให ร ปแบบการแสดงผล เอกสาร HTML ม ล กษณะของความสม าเสมอท วก นท กหน าเอกสารภายในเว บไซต เด ยวก น ความสามารถของ CSS 2.4 SQL CSS ม ค ณสมบ ต มากกว า tag ของ html เช น การกาหนดกรอบให ข อความ รวมท งส ร ปแบบ ของข อความท กล าวมาแล ว CSS น นกาหนดท ต นของไฟล html หร อตาแหน งอ น ๆ ก ได และสามารถม ผล ก บเอกสาร ท งหมด หมายถ งกาหนด คร งเด ยวจ ดเด ยวก ม ผลก บการแสดงผลท งหมด ทาให เวลาแก ไขหร อ ปร บปร งทาได สะดวก ไม ต องไล ตามแก tag ต างๆ ท วท งเอกสาร CSS สามารถกาหนดแยกไว ต างหากจาก ไฟล เอกสาร html และสามารถนามาใช ร วม ก บ เอกสารหลายไฟล ได การแก ไขก แก เพ ยง จ ดเด ยวก ม ผลก บเอกสารท งหมด CSS ก บ HTML / XHTML น นทาหน าท คนละอย างก น โดย HTML / XHTML จะท าหน าท ในการวางโครงร างเอกสารอย างเป นร ปแบบ ถ กต อง เข าใจง าย ไม เก ยวข องก บการ แสดงผล ส วน CSS จะทาหน าท ในการตกแต งเอกสารให สวยงาม เร ยกได ว า HTML /XHTML ค อส วน coding ส วน CSS ค อส วน design [3] sql เป นภาษาท ใช ในสาหร บการเร ยกใช ฐานข อม ล ซ งย อมาจาก "structured query language" โดยท sql เป นภาษาท ม มาตรฐานและเป นระบบเป ด (open system) หมายถ งเราสามารถใช ค าส ง sql ก บฐานข อม ล ชน ดใดก ได และ คาส งงานเด ยวก นเม อส งงานผ าน ระบบฐานข อม ลท แตกต างก นจะได ผลล พธ เหม อนก น ท าให เราสามารถเล อกใช ฐานข อม ล ชน ดใดก ได โดยไม ต ดย ดก บฐานข อม ลใดฐานข อม ลหน ง ประโยชน ของ sql นอกเหน อจากท กล าวข างต นแล ว ค อการท างานของโปรแกรมฐานข อม ลบน server เม อเราใช sql โปรแกรมจะ ทางานได เร วกว าการใช table ความสามารถของภาษา sql ย งม มากกว าการจ ดการ table เราสามารถใช sql 4

16 ทางานอ น ๆ เช นการใช stored procedure เพ อให การท างานก บฐานข อม ลเก ดข นภายใน server เท าน น ไม ต อง ส งข อม ลกล บไปมาก บเคร อง client ซ งจะม ผลให การทางานเร วข น ภาษา sql จะม คาส งหล ก ๆ อย 2 ประเภท ค อ DDL - data definition language ใช ในการจ ดการโครงสร างของ table, view แลindex เช น คาส ง create, alter เป นต น DML - data manipulation language ใช ในการปร บปร งข อม ลภายใน table เช น คาส ง select, insert, update, delete [4] 2.5 Wordpress WordPress เป น open source web software ท เราสามารถต ดต งบนเว บ server ของเราเพ อสร าง เว บไซต, blog หร อ community ตอนเร มแรก WordPress เป นเคร องม อไว สาหร บสร าง blog แต ได ร บการ พ ฒนามาเร อย ๆ จนสามารถสร างเป นเว บไซต หร อ เว บ community ได แล ว โดยม ระบบจ ดการบทความ หร อ Content Management System (CMS) ทาให ง ายต อการใช งาน ซ ง WordPress สร างข นโดย Matt Mullenweg และ Mike Little ในป 2003 น บว าม การพ ฒนามาถ ง 9 ป แล ว WordPress ได ร บความน ยมเป น อย างมากจากบล อกเกอร ท วโลก เน องจากเป นระบบท ม ความย ดหย นในการใช งาน อ กท งย งม ผ ท สร างปล กอ น (โปรแกรมเสร ม), ธ ม (ร ปแบบการแสดงผล), รวมท งระบบอ นๆ ท สามารถใช งานร วมก บ WordPress ได เป น จานวนมาก จ งทาให เว ร ดเพรสส ได ร บความน ยมอย างย ง [5] ร ปท 2-2 Wordpress 5

17 2.6 ระบบการจ ดการฐานข อม ล (DBMS: Database Management System) ระบบฐานข อม ล (Database) หมายถ ง กล มของข อม ลท ม ความส มพ นธ ก นและถ กนามาจ ดเก บในท เด ยวก น โดยข อม ลอาจเก บไว ในแฟ มข อม ลเด ยวก นหร อแยกเก บหลาย ๆ แฟ มข อม ล แต ต องม การสร าง ความส มพ นธ ระหว างข อม ลเพ อประส ทธ ภาพในการจ ดการข อม ลในการจ ดเก บข อม ลในระบบฐานข อม ลม ข อด กว า การจ ดเก บข อม ลในระบบแฟ มข อม ลพอสร ปประเด นหล ก ๆ ได ด งน ม การใช ข อม ลร วมก น (data sharing) ลดความซ าซ อนของข อม ล (reduce data redundancy) ข อม ลม ความถ กต องมากข น (improved data integrity) เพ มความปลอดภ ยให ก บข อม ล (increased security) ม ความเป นอ สระของข อม ล (data independency) องค ประกอบของ DBMS DBMS หร อ Database Management System ค อ โปรแกรมท ทาหน าเป นต วกลางระหว างผ ใช (user) ก บ ฐานข อม ลเพ อจ ดการและควบค มความถ กต อง ความซ าซ อน และความส มพ นธ ระหว างข อม ลต างๆ ภายใน ฐานข อม ล ซ งต าง ไปจากระบบแฟ มข อม ลค อ หน าท เหล าน จะเป นของโปรแกรมเมอร ในการต อฐานข อม ลไม ว าจะ ด วยการใช คาส งในกล ม DML หร อ DDLหร อจะด วยโปรแกรมต าง ๆ ท กคาส งท ใช กระท าก บฐานข อม ลจะถ ก โปรแกรม DBMS นาไปแปล (Compile) เป นการกระทา (Operation) ต างๆภายใต คาส งน นๆ เพ อน าไปกระทา ก บต วข อม ลในฐานข อม ลต อไปส วนการทางานต าง ๆ ภายในโปรแกรม DBMS ท ทาหน าท ในการแปลคาส งไปเป น การ กระทาต าง ๆ ด งน 1) Database Manager เป นส วนท ทาหน าท กาหนดการกระทาต าง ๆ ให ก บส วน File Manager เพ อไป กระทาก บข อม ลท เก บอย ในฐานข อม ล File Manager เป นส วนท ทาหน าท บร หาร และจ ดการก บข อม ลท เก บอย ใน ฐานข อม ลในระด บกายภาพ 2) Query Process เป นส วนท ทาหน าท แปลงประโยคคาส งของ Query Language ให อย ในร ปแบบของคาส ง ท Database Manager เข าใจ 3) Data Manipulation Language Precompiler เป นส วนท ทาหน าท แปลประโยคคาส งของกล มคาส ง DML ให อย ในร ปแบบท ส วน Application Programs Object Code จะนาไปเข ารห สเพ อส งต อไปย งส วน Database Manager ในการแปลประโยคคาส งของกล มคาส ง DML ของ Data Manipulation Language Precompiler น จะต องทางานร วมก บส วน Query Processor 6

18 4) Data Definition Language Precompiler เป นส วนท ทาหน าท แปลประโยคค าส งของกล มค าส ง DDL ให อย ในร ปแบบของ Meta Data (รายละเอ ยดท บอกถ งโครงสร างต าง ๆ ของข อม ล) ท เก บอย ในส วน Data Dictionary ของฐานข อม ล 5) Application Programs Object Code เป นส วนท ทาหน าท แปลงคาส งต าง ๆ ของโปรแกรมรวมท งคาส ง ในกล มคาส ง DML ท ส งต อมาจากส วน Data Manipulation Language Precompiler ให อย ในร ปของ Object Code ท จะส งต อไปให Database manager เพ อกระทาก บข อม ลในฐานข อม ล โปรแกรม DBMS ถ กพ ฒนาข นเพ อแก ไขป ญหาด าน Data Independence ท ไม ม ในระบบแฟ มข อม ล ทา ให ม ความเป นอ สระจากท งส วนของฮาร ดแวร และข อม ลภายในฐานข อม ลกล าวค อโปรแกรม DBMS น จะม การ ทางานท ไม ข นอย ก บร ปแบบ (Platform) ของต วฮาร ดแวร ท นามาใช ก บระบบฐานข อม ลรวมท งม ร ปแบบในการ อ างถ งข อม ลท ไม ข นอย ก บโครงสร างทางกายภาพของข อม ลด วยการใช Query Language ในการต ดต อก บข อม ล ในฐานข อม ลแทนคาส งภาษาคอมพ วเตอร ในย คท 3 ส งผลให ผ ใช สามารถเร ยกใช ข อม ลจากฐานข อม ลได โดยไม จาเป นต องทราบถ งประเภทหร อขนาดของข อม ลน นหร อสามารถกาหนดลาด บท ของฟ ลด ในการกาหนดการ แสดงผลได โดยไม ต องคาน งถ งลาด บท จร งของฟ ลด น น 7

19 3. เคร องม อท ใช ในการทาโครงงาน 3.1 Software 1) window7 ระบบปฏ บ ต การของบร ษ ท Microsoft ใช สาหร บ personal computer 2) wordpress โปรแกรมม ระบบในการช วยจ ดการเน อหาบนเว บหร อ CMS (Content Management System) 3) MySQL ค อระบบจ ดการฐานข อม ลโดยใช ภาษา SQL เป นซอฟต แวร โอเพนซอร ส 4) phpmyadmin โปรแกรมท ถ กพ ฒนาโดยใช ภาษา PHP เพ อใช ในการบร หารจ ดการฐานข อม ล Mysql แทนการ ค ย คาส ง 5) Notepad++ ใช ในการเข ยนโค ดภาษาต างๆ เช น PHP, HTML 6) Appserv ค อโปรแกรมท รวบรวมเอา Open Source Software หลายๆ อย างมารวมก น โดยม Package หล ก 4 อย าง Apache PHP MySQL phpmyadmin 8

20 4.1 องค ประกอบโดยรวมของระบบ 4. ว ธ การดาเน นโครงงาน 1) Web Application เป นหน าเว บของโครงการ IUP คอยแสดงข อม ลข าวสารต างๆ ให น ส ต น กเร ยน หร อบ คคลท วไปสามารถเข ามาด ได 2) Database Server ส วนฐานข อม ลทาหน าท เก บข อม ลต างๆ เช น ข อม ลประจาต วผ สม ครเร ยน ข อม ลอาจารย ข อม ลสมาช กของเว บไซต ร ปท 4-1 ร ปแบบการเช อมต อของระบบ Client ต ดต อ Server ด วย HTTP เพ อนาข อม ลในส วน Web site มาแสดงผลและ Server ต ดต อ Database เพ อนาข อม ลในฐานข อม ลมาแสดงผล 9

21 4.2 กระบวรการทางานของระบบ Web Site โดยส วนหล กของระบบแบ งการทางานออกเป น 2 ส วนด วยก นค อ เว บไซต น ม Site map ด งน News Study Undergraduate EMME ME SKE Postgraduate Teaching & Learning Teaching Approach Learning Facilities ร ปท 4-2 หน าเว บไซต 10

22 Flexible Study Cooperative Study Educational Trip Exchange Program Funding Admission How to apply Tuition Fee Scholarship Q & A Contact US Managerial Board Staff Map Make an inquiry Current Student Life at IUP Wellbeing & Support Clubs & Societies Our City & Countryside Accommodation Culture on Campus Sport at IUP Living in Thailand Visit Days & Campus Tours Undergraduate Visit Days Postgraduate Visit Days Undergraduate Campus Tours Visit Days & Campus Tours Calendar Departmental Open Days 11

23 Achievement ระบบสม ครออนไลน ระบบสม ครออนไลน เป นส วนท อานวยความสะดวกให ผ สม ครสามารถสม ครเร ยนผ านระบบน โดย การกรอกข อม ลและการส งเอกสารการสม ครต างๆ เช น Transcript ใบร บรองต างๆ เป นต น ท งน ระบบ การสม ครออนไลน น นม ข นตอนการสม ครด งร ป ร ปท 4-3 Flowchart การร บสม ครเร ยน 12

24 อธ บายข นตอนการร บสม คร ประกาศร บสม คร ส งใบสม ครและเอกสารต างๆ ตรวจสอบใบสม คร ตรวจสอบจานวนคนร บสม คร สอบส มภาษณ ลงทะเบ ยนย นย นส ทธ มอบต ว ป ดร บสม คร 13

25 ร ปท 4-4 Flowchart การสม ครออนไลน ในส วน User 14

26 อธ บายข นตอนการสม ครส วน User Login เข าส ระบบโดยการกรอก Username และ Password ระบบทาการตรวจสอบการ login สม ครเร ยนและกรอกข อม ลการสม คร ทาการด เพ ม ลบ แก ไขข อม ล บ นท กข อม ล จบการทางานออกจากระบบ ร ปท 4-5 Flowchart ส วนของ Admin 15

27 อธ บายข นตอนในส วนของ Admin Login เข าส ระบบโดยการกรอก Username และ Password ระบบทาการตรวจสอบการ login ด ข อม ลการสม ครของผ สม คร ทาการด เพ ม ลบ แก ไขสถานะการสม คร บ นท กข อม ล จบการทางานออกจากระบบ 4.3 ข นตอนการพ ฒนา การออกแบบฐานข อม ล ร ปแบบฐานข อม ลท ใช ในการจ ดเก บข อม ลเก ยวก บ น กเร ยน ประเภทโครงการ และเอกสารต างๆ ท ใช ใน การสม ครเร ยน ซ งประกอบด วยตารางท งหมด 10 ตาราง 1. member 2. student 3. program 4. choose 5. acadeaward 6. acadequal 7. upload 8. doctype 9. passport 10. stat 16

28 4.3.2 พจนาน กรมฐานข อม ล UserID (PK) Username Password Name Status Field_name Data type int(5) not null varchar(20) varchar(20) varchar(100) enum( ADMIN, USER ) ตารางท 4-1 member เก บข อม ล user account ของท ง admin และ user Field_name stdid(pk) int(5) not null fname varchar(50) lname varchar(50) birthdate varchar(10) birthcountry varchar(20) sex varchar(5) nation varchar(20) telephone varchar(15) mobile varchar(15) varchar(30) address varchar(15) road varchar(20) suburb varchar(20) district varvchar(20) province varchar(20) country varchar(15) postcode varchar(15) statid int(2) ตารางท 4-2 student Data type เก บข อม ลต างๆ ของน กเร ยน 17

29 proid(pk) proname Field_name int(2) not null varchar(10) ตารางท 4-3 program Data type เก บข อม ลชน ดหล กส ตร cid(pk) proid stdid Field_name Data type bigint(20) not null int(2) bigint(20) ตารางท 4-4 choose เป นตารางท เช อมความส มพ นธ แบบ many to many ของ student ก บ program qualid(pk) school country year gpa Field_name int(5) not null varchar(20) varchar(20) varchar(5) float ตารางท 4-5 acadequal Data type เก บข อม ลเก ยวก บโรงเร ยน ป ท จบการศ กษา Field_name awardid(pk) int(5) not null awardname text ตารางท 4-6 acadeaward Data type เก บข อม ลเก ยวก บรางว ลท ได ร บระหว างศ กษา 18

30 docid (PK) stdid typeid path Field_name Data type int(11) not null int(5) int(3) varchar(50) ตารางท 4-7 upload เก บตาแหน งของเอกสารการสม ครเร ยน typeid(pk) typename Field_name int(3) not null varchar(20) ตารางท 4-8 doctype Data type เก บชน ดของเอกสารท ใช ในการสม คร Field_name stdid(pk) int(5) not null pname varchar(40) pnumber int(20) pcountry varchar(20) pissue date pexpire date ตารางท 4-9 passport Data type เก บข อม ล passport (ถ าม ) Field_name statid(pk) statname เก บข อม ลสถานะการสม คร int(2) not null varchar(25) ตารางท 4-10 stat Data type 19

31 4.3.3 E-R Diagram ร ปท 4-6 แผนภาพ E-R Diagram การเช อมความส มพ นธ (Relationship) student 1 1 is member ร ปท 4-7 แผนภาพแสดงความส มพ นธ ระหว าง student ก บ member น กเร ยน 1 คนม account ได 1 member Member 1 member เป นของน กเร ยน 1 คน 20

32 student 1 1 have passport ร ปท 4-8 แผนภาพแสดงความส มพ นธ ระหว าง student ก บ passport น กเร ยน 1 คนม ได 1 passport Passport 1 อ น เป นของน กเร ยน 1 คน student 1 1 have acadequal ร ปท 4-9 แผนภาพแสดงความส มพ นธ ระหว าง student ก บ acadequal น กเร ยน 1 คนม 1 academic qualification Academic qualification 1 อ นเป นของน กเร ยน 1 คน student 1 1 have acadeaward ร ปท 4-10 แผนภาพแสดงความส มพ นธ ระหว าง student ก บ acadeaward น กเร ยน 1 คนม ได 1 academic award Academic award 1 อ น เป นของน กเร ยน 1 คน student 1 1 have stat ร ปท 4-11 แผนภาพแสดงความส มพ นธ ระหว าง student ก บ stat น กเร ยน 1 คนม ได 1 สถานะการสม คร สถานะสม คร 1 สถานะ เป นของน กเร ยน 1 คน 21

33 student M choose M program ร ปท 4-12 แผนภาพแสดงความส มพ นธ ระหว าง student ก บ program น กเร ยน 1 คนสม ครเร ยนได หลาย program Program 1 หล กส ตร ถ กสม ครโดยน กเร ยนหลายคน student 1 1 manage upload ร ปท 4-13 แผนภาพแสดงความส มพ นธ ระหว าง student ก บ upload น กเร ยน 1 คนม ได 1 upload document upload document 1 อ น เป นของน กเร ยน 1 คน upload 1 M type doctype ร ปท 4-14 แผนภาพแสดงความส มพ นธ ระหว าง upload ก บ doctype Upload document 1 เอกสาร ม หลายชน ด ชน ดของเอกสารหลายชน ดอย ในเอกสารต อ 1 upload 22

34 5.1 ส วนแสดงข าวสารของเว บไซต 5. ผลการดาเน นโครงงานและว จารณ เน องจากโครงการ IUP ต องม ข าวสารต างๆ และหน าเว บสามารถแสดงข าวสารท งห วข อ ร ปภาพ และ ข อความได 5.2 ส วนของการ Search ร ปท 5-1 ส วนแสดงข าวสาร ในเว บไซต ประกอบไปด วยหลาย Page ด งน นการม search box จ งเป นประโยชน อย างมาก ทดสอบโดย การใส คาว า Admission ร ปท 5-2 ส วนการ search ข อม ล ผลการทดสอบการใส คาว า Admission ลงใน search box เป นไปตามต องการได ข อม ลท ม ความเก ยวข องก บ Admission 23

35 5.3 Menu ร ปท 5-3 Menu เว บไซต น เป นเว บท ม เมน อย ด านซ ายเท าน นเป น menu แนวต งและสามารถแสดง child-page ในเมน ได โดย ทดสอบจากการคล กท study จะเห นว าม child-page และข นต อไปจะเป นการคล กท Undergraduate เพ อ ทดสอบว าสามารถแสดง child-page ได หร อไม ผลประกฎว าสามารถแสดง child-page ได อย างถ กต อง ร ปท 5-4 child-page 24

36 5.4 ส วนของระบบสม ครเร ยน การ login ด ข อม ลในส วนของ admin ร ปท 5-5 หน า login ร ปท 5-6 หน า admin การทางานของระบบสม ครเร ยนในส วนของ admin ทางานได อย างถ กต อง 25

37 5.4.2 การสม ครส วนของ user งานได ถ กต อง ในส วนของการสม ครเร ยน กรอกข อม ลและอ พโหลดเอกสารและน าพอใจสามารถสม ครและใช 26

38 6. สร ปผลการดาเน นงานและข อเสนอแนะ 6.1 ข อสร ป โครงงานน จ ดทาข นเพ อนาไปใช ประโยชน ให ก บโครงการ IUP คณะว ศวกรรมศาสตร มหาว ทยาล ยเกษตรศาสตร ในการอ พเดทข าวสารของโครงการและการร บสม ครน ส ตในระบบออนไลน เน องจาก เว บไซต ของโครงการ IUP เว บไซต เก าน นย งไม ม ระบบท ท นสม ยและย งไม สวยงามเท าท ควร ผ จ ดทาโครงงานจ งได สร างเว บไซต ข นมาใหม เพราะสามารถทาได ง ายกว าการแก ไขเว บไซต เก าอ กท งย ง ต องเพ มระบบการสม ครเร ยนออนไลน จากการทดลองระบบต างๆ เว บไซต ทางานได อย างถ กต องและรวดเร วสามารถนาไปใช ได จร งเพ ออานวย ความสะดวกให ก บโครงการ IUP ท งบ คคลภายนอกท ต องการมาต ดต อและบ คลาการภายใน ในการใช เว บไซต น 6.2 ป ญหาและอ ปสรรค เน องจากการเข ยนเว บไซต น นต องสามารถให อ ปกรณ หร อโปรแกรมแสดงผลต างๆน น สามารถแสดงผล ออกมาได อย างถ กต อง ต องท าให เป ดได ท งใน Tablet และ SmartPhone หร อโปรแกรม Web Browser ต างๆ ให แสดงผลตรงก นจ งต องม ความรอบคอบในการทาเว บไซต 6.3 แนวการการพ ฒนาต อ การพ ฒนาต อสามารถพ ฒนาในส วนของ User Interface ให ม ความสวยงาม ท นสม ย และ ถ กต อง สามารถเพ มระบบกระจายข อม ลข าวสารผ าน โปรแกรม Line ซ งเป นโปรแกรม Chat ท น ยมท ส ด ณ เวลาท ทาโครงงานน 27

39 7. บรรณาน กรม 1) [1] 2) [2] 3) ม อ/73-ค ออะไร/2193-css-ค ออะไร.html [3] 4) [4] 5) ออะไร [5] 6) 0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%A5%E0%B8%87%E0%B9%82%E0%B8 %9B%E0%B8%A3%E0%B9%81%E0%B8%81%E0%B8%A3%E0%B8%A1-appserv- %E0%B9%81%E0%B8%A5%E0%B8%B0-wordpress [6] 28

40 8. ภาคผนวก ภาคผนวก ก ค ม อการต ดต ง การต ดต งเคร องม อ โดยปรกต แล วเว บไซต จะทางานได น นต องถ กสร างข นมาและอ พโหลดข นไปท server และจด domain name ในโครงงานน ใช server ของมหาว ทยาล ยเกษตรศาสตร เน องจากเป นเว บไซต ของภาคว ชาด งน นการสร างเว บไซต ให ใช งานได ต องม โปรแกรมช วยในการสร างเว บไซต และโปรแกรมสาหร บนาเว บไซต และข อม ลต างๆ ไปท server 8.1 การต ดต งและใช งาน Appserv เบ องต น 1) ด บเบ ลคล กท ไฟล เพ อ Install โปรแกรม 2) คล ก Next ร ปท 8-1 ร ปท

41 3) คล ก I Agree ร ปท 8-3 4) เล อกโฟลเดอร ท จะเก บโปรแกรมด งน นคล ก Next ร ปท

42 5) เล อก package ท งหมดจากน น คล ก Next ร ปท 8-5 6) พ มพ Server Name ตอนน เราทาในเคร องใส localhost พ มพ ของ Admin Port 80 เป นค า Default อย แล ว จากน นคล ก Next ร ปท

43 7) พ มพ Password ของ root (ต งเอง) และใส ซ าอ กรอบด านล าง Character Sets and Collations เป น UTF-8-Unicode จากน นคล ก Install 8) รอจนกว าจะลงโปรแกรมเสร จ ร ปท 8-7 ร ปท

44 9) จากน นเม อลงโปรแกรมเสร จ จะ Start Apache ก บ Start MySQL เม อคล ก Finish ร ปท ) ในการใช งานคร งต อๆ ไปการ Start Apache ก บ Start MySQL ทาได โดยการไปท Start > All Programes > AppServ > Control Server by Service ร ปท

45 11) จากน นเป ดหน าต าง Browser พ มพ Localhost แล ว Enter จะเข ามาหน าด งภาพ คล กท ล งค phpmyadmin Database Manager Version... เพ อเข าไปสร าง Database ร ปท ) เม อคล กตามล งค ด านบน จะให ใส User Name(ใส root) และ Password(ท เราต งไว ) แล วคล ก OK ร ปท ) เม อเข ามาแล วให ไปท Create new database ร ปท

46 14) ใส ช อ Database ท ต องการ (แล วแต เราจะต ง) เล อก utf8_unicode_ci แล วคล ก Create ร ปท 8-14 ร ปท ) จากน นไปเป ดโฟลเดอร AppServ ในไดร ฟ C: ร ปท

47 16) เข าโฟลเดอร www ร ปท ) ในโฟลเดอร จะม ไฟล index.php อย ให rename เพ อป องก นการเข ยนท บ เวลาเรา Copy ไฟล มา จากโฟลเดอร Wordpress ร ปท

48 8.2 การต ดต ง Wordpress 1) wordpress เวอร ช นล าส ด ค อ wordpress ไฟล ท Download มาจะเป นไฟล.zip Extract ไฟล zip จะได โฟลเดอร wordpress ร ปท ) เป ดโฟลเดอร wordpress และ Copy ท กไฟล ในโฟลเดอร ไปใส ในโฟลเดอร C:\AppServ\www ร ปท

49 3) ย ายไฟล ท กไฟล มาท โฟลเดอร www ร ปท ) ในโฟลเดอร จะม ไฟล readme.html ให อ าน หากต องการความช วยเหล อ ในภาพเป นว ธ การ Install ร ปท

50 Notepad) 5) ในโฟลเดอร www จะม ไฟล wp-config-sample.php เป ดไฟล ข นมาแก ไข (อาจจะเป ดด วย ร ปท

51 6) แก ไข 4 จ ดค อ ใส ช อ Database ท เข าไปสร างไว ใส username เป น root ใส password ท ต งไว ใส hostname เป น localhost(ตามท ได ต งไว ต งแต ต น) 7) กรอกข อม ลต างๆ ให ครบ ร ปท 8-24 ร ปท

52 8) จากน น Save as ไฟล เปล ยนช อเป น wp-config.php ร ปท ) จากน นเป ดหน าต าง Browser พ มพ Localhost แล ว Enter จะเข ามาหน าด งภาพ ร ปท

53 10) พ มพ ช อ Blog ตามแต จะต ง(แก ไขได ในภายหล ง) พ มพ Address (อะไรก ได ตามร ปแบบอ เมล ) แค ทดลองไม ต องใช เมล จร งก ได จากน นคล ก Install Wordpress คล ก Log In ร ปท ) เม อลงเสร จ (ม นจะเร วมาก) จะข นหน า username password มา ให copy password ไว แล ว ร ปท

54 12) เม อเข ามาหน าน กรอก username และ password ท copy มาแล วคล ก Log in ร ปท 8-30 ท มา [6] 43

55 9. ประว ต น ส ต ช อ-นามสก ล นายอ ครพงษ กาญจนอาพล เลขประจาต วน ส ต ภาคว ชาว ศวกรรม คอมพ วเตอร คณะว ศวกรรมศาสตร มหาว ทยาล ยเกษตรศาสตร ท อย ป จจ บ น 37/98 ถ.บ านปากแรต ต.บ านโป ง อ.บ านโป ง จ. ราชบ ร โทรศ พท ท บ าน โทรศ พท เคล อนท ระด บการศ กษา: ค ณว ฒ การศ กษา จากโรงเร ยน/สถาบ น ป การศ กษาท จบ ม ธยมศ กษาตอนปลาย โรงเร ยนสวนก หลาบว ทยาล ย 2549 ม ธยมศ กษาตอนต น โรงเร ยนสวนก หลาบว ทยาล ย